<template>
	<view class="content">
		<view class="cont1">
			<view class="cont1_1">
				配送信息
			</view>
			<view class="cont1_2" @click="open">
				修改收货信息
			</view>
			<view class="address" v-show="isAddress">
				<span>收货地址: </span>
				<span style="padding: 0rpx 20rpx;font-size: 24rpx;color:darkgrey"> {{formAddress.name}}  {{formAddress.phone}}</span>
				<view style="padding: 30rpx 150rpx;font-size: 24rpx;color:darkgrey">
					{{formAddress.address}}
				</view>
			</view>
			<view >
				<uni-popup ref="popup" type="bottom" background-color="#fff"  :mask-click="false">
					<view class="popup-content">
						<view class="uni-form-item uni-column">
							<view class="title">收货人:</view>
							<input class="uni-input" focus  v-model="formAddress.name"/>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">电话:</view>
							<input class="uni-input" focus  v-model="formAddress.phone" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">收货地址:</view>
							<input class="uni-input" focus  v-model="formAddress.address"/>
						</view>
						<view class="ensure">
							<button @click="cancel" class="mybtn">取消</button>
							<button @click="close" class="mybtn">确认</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="cont2">
			<view>
				商品信息
			</view>
			<view class="cont3">
				<image class="t1" :src="goods.src"></image>
				<view class="t2">
					<text>{{goods.goodsName}}</text>
					<view class="jifen">
						<span class="span2"> {{goods.jifen}}积分</span>
						<span >规格: {{goods.size}}</span>
						<span class="span3"> x {{goods.number}}</span> 
					</view>
				</view>
			</view>
		
		</view>
		<view class="foot">
			<text>支付方式</text>
			<view>
				积分支付 <span class="span2" > {{total}} </span> 积分
			</view>
<!-- 			<view class="discount">
				折扣：<span class="span2" >{{goods.discount}}</span> 折
			</view> -->
		</view>
		<view class="btn">
			<view>
				实际支付：<span class="span2"> {{total}} </span> 积分
			</view>
			<button @click="pay">
				立即支付
			</button>
		</view>
		<view>
			<uni-popup ref="popupPay" type="bottom" background-color="#fff" :mask-click="false">
				<view class="popup-content">
					<view class="uni-form-item uni-column">
						<view class="title">请输入密码 : </view>
						<input class="uni-input" focus  v-model="password" type="password"/>
					</view>
					<view class="ensure">
						<button @click="cancelPay" class="mybtn">取消</button>
						<button @click="orderPay" class="mybtn">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		// 接收上个页面传递过来的参数
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.order.id = option.id
			 this. isAddress = true
				this.getOrder()
			},
		data() {
			return {
				userName:'',
				payPwd:'',
				userJifen:0,
				order:{
				id:0,
				//订单创建时间
				orderTime:'',
				//订单编号
				order_id:'',
				//付款时间
				payTime:'',
				price:0
				},
				isShow:false,
				//展示收货信息
				isAddress:false,
				//收货信息表单
				formAddress:{
					address:'',
					name:'',
					phone:'',
					state:''
				},
				// 支付密码
				password:'',
				// 有收货地址的表单
				// form1:{
				// 	address:'成都市武侯区',
				// 	name:'张三',
				// 	phone:'123456789',
				// 	state:''
				// },

				// 商品信息数据
				goods:{
					id:'',
					src:'',
					goodsName:'',
					jifen:'',
					number:'',
					totalJifen:'',
					size:'',
					price:''
				}
			}
		},
		created(){
			this.getUser()
			
		},
		computed:{
		total:function(){
			return this.goods.jifen * this.goods.number
		},
		},
		methods: {
			getJifen(){
				uni.request({
						url:'http://localhost:3001/selectJf',
						data:{
							userName:this.userName
						},
						method:'post',
						success:(res)=>{
							this.userJifen = res.data.data[0].jiFen
						}
				})
			},
			// 验证密码是否正确
			getPwd(){
				uni.request({
						url:'http://localhost:3001/seachPwd',
						data:{
							userName:this.userName,
						},
						method:'post',
						success:(res)=>{
							if(res.data.code==200){	
								this.payPwd = res.data.data[0].payPwd
							}
						}
				})
			},
			// 根据id获取订单详情
			getOrder(){
				// console.log(this.order.id)
				uni.request({
					url:'http://localhost:3001/idOrder',
					data:{
						id:this.order.id
					},
					method:'post',
					success:(res)=>{
						console.log(res.data.data)
						 this.goods.id = res.data.data[0].goods_id
						 this.goods.src = res.data.data[0].goods_imgs
						 this.goods.goodsName = res.data.data[0].goods_name
						 this.goods.size = res.data.data[0].goods_size
						 this.goods.number = res.data.data[0].goods_num
						  this.goods.jifen = res.data.data[0].goods_jf
						  this.formAddress.name =res.data.data[0].user 
						  this.formAddress.phone =res.data.data[0].phone
						  this.formAddress.address =res.data.data[0].address
					}
				})
			},
			//获取当前登录用户名
			getUser(){
				uni.getStorage({
					key: 'userInfo',
					success:(res)=> {
						 this.userName = res.data
						 console.log(this.userName);
						 this.getJifen()
						 this.getPwd()
					}
				});
			},
			   // 获取付款时间
				   getPayTime () {
				        let date = new Date()
				        let Y = date.getFullYear()
				        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
				        let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
				        let hours = date.getHours()
				        let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
				        let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
				        date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
				   		this.order.payTime = date
				   		return this.order.payTime
				      },
				//没有收货地址时打开弹框填写收货地址
			      open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('top')
						this.isAddress = false
			      },
				 // 关闭弹窗
				  close() {
				  			this.$refs.popup.close()
							// this.form1 = this.form
							this.isAddress = true
				  		},
				// 有地址时展示收货地址
			// 展示收货信息
			showAddress(){
				this.isAddress = true
			},
			 // 点击取消关闭弹框
			cancel(){
				this.$refs.popup.close()
				this.isAddress = true
			},
			// 点击支付按钮
			pay(){
				this.getJifen()
				// console.log(this.form1)
				// 判断收货信息是否为空
					if(this.formAddress.name==""||this.formAddress.phone==""||this.formAddress.address==""||this.isAddress==false){
						wx.showModal({
						  title: '提示',
						  content: '请完善收货信息',
						  success (res) {
						    if (res.confirm) {
						      // console.log('用户点击确定')
						    } else if (res.cancel) {
						      // console.log('用户点击取消')
						    }
						  }
						})
					}else{
							// 打开支付密码窗口
							this.$refs.popupPay.open('center')
							}
							},
			// 取消支付关闭支付密码窗口
			cancelPay(){
				// 生成待付款订单信息
				 this.$refs.popupPay.close()
				// 订单状态待付款
				// uni.switchTab({
				// 	url: '/pages/orderList/orderList'
				// });
			},
			// 支付成功修改当前用户积分
			updateJifen(){
				// console.log(this.total,'z总积分',this.userJifen)
				this.updatejf = this.userJifen - this.total
				console.log(this.updatejf,'修改积分')
				uni.request({
						url:'http://localhost:3001/modifyJf',
						data:{
							userName:this.userName,
							jiFen:this.updatejf
						},
						method:'post',
						success:(res)=>{
						console.log(res.data,'当前用户积分')
						}
				})
				},
			// 确认支付
			orderPay(){
				// console.log(this.payPwd,this.password,this.userJifen,this.total)
				if(this.userJifen - this.total >=0){
						if(this.password == this.payPwd){
							// 生成待发货订单信息，订单编号，订单状态，付款时间
							console.log(this.userJifen)
							this.formAddress.state = 2
							this.goods.totalJifen = this.total
							// 拿到当前时间
							this.getPayTime()
						// 发起请求，通过id修改待付款订单的付款时间以及订单状态
						uni.request({
							url:'http://localhost:3001/updateState',
							data:{
								id:this.order.id,
								paytime:this.order.payTime,
								status:this.formAddress.state,
								address:this.formAddress.address,
								phone:this.formAddress.phone,
								user:this.formAddress.name,
								paytype:'积分支付',
								distr_time:'待发货',
							},
							method:'post',
							success:(res)=>{
								console.log(res.data)
								// this.userPwd = res.data.data.
								this.updateJifen()
							}
						})
							uni.showModal({
							  content: '支付成功',
							  success (res) {
							    if (res.confirm) {
							      // console.log('用户点击确定')
								  uni.switchTab({
								  	url:'/pages/orderList/orderList'
								  })
							    } else if (res.cancel) {
							      // console.log('用户点击取消')
							    }
							  }
							})
						}else{
						wx.showToast({
						  title: '密码错误',
						  icon: 'error',
						  duration: 1000
						})
						}
						this.password = '' 		
						// 如果密码错误
					} else{
						wx.showToast({
						  title: '积分不足',
						  icon: 'error',
						  duration: 1000
						})
					}
					this.password = ''
					 this.$refs.popupPay.close()
				}
		
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 750rpx;
		height: 800rpx;
		padding: 20rpx 0rpx;
		background-color:rgb(247,246,246);
		box-sizing: border-box;
	}
	.cont1{
		width: 680rpx;
		height: 300rpx;
		background: white;
		margin: 30rpx auto;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		.cont1_2{
			text-align: center;
			font-size: 28rpx;
		}
	}
	uni-popup{
		height: 300rpx;
		border-radius: 10rpx;
	}
	.ensure{
		display: flex;
		justify-content: space-around;
	}
	.mybtn{
		margin: 10rpx 0rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 150rpx;
		background-color: orangered;
		color: white;
		font-size: 26rpx;
		border-radius: 10rpx;
	}
	.uni-common-mt{
		margin: 40rpx 0rpx;
		box-sizing: border-box;
	}
	.popup-content{
		width: 680rpx;
		
	}
	.address{
		font-size:26rpx;
		padding: 20rpx 20rpx;
		margin: 0rpx auto;
		view{
		padding: 20rpx 0rpx;
		}
	}
	input{
		border:1px #e5e5e5 solid;
		width: 350rpx;
	}
	.uni-form-item{
		display: flex;
		justify-content: space-around;
		margin: 20rpx auto;
	}
	.title{
		font-size:24rpx;
	}
	.cont2{
		width: 680rpx;
		height: 250rpx;
		margin: 20rpx auto;
		background: white;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}
.cont3{
		padding: 20rpx 20rpx;
		display: flex;
		height:100rpx;
		box-sizing: border-box;
		view{
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: grey;
			line-height: 40rpx;
		}
	}
	image{
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.t1{
		width: 200rpx;
		height: 100rpx;
		color: black;
		font-size: 24rpx;
	}
	.span2{
		color: orangered;
	}
	.span3{
		padding-left: 300rpx;
		
	}
	.foot{
		width: 680rpx;
		margin: 50rpx auto;
		padding: 20rpx 20rpx;
		width: 680rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-sizing: border-box;
		view{
			font-size: 28rpx;
		}
		span{
			color: black;
			font-size: 28rpx;
		}
		
	}
	.jifen{
		display: flex;
		justify-content: space-between;
	}
	
	.span4{
			font-size: 28rpx;
			color: red;
		}
	.btn{
		padding-left:40rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 500rpx;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: border-box;
		button{
			height: 60rpx;
			line-height: 60rpx;
			background: red;
			color: white;
		}
	}
	.btn2 button{
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		margin: 10rpx auto;
	}
</style>
